<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { ElTree } from 'element-plus';

interface Tree {
    id: number;
    label: string;
    children?: Tree[];
}

const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();

const defaultProps = {
    children: 'children',
    label: 'label',
};

watch(filterText, val => {
    treeRef.value?.filter(val);
});

const filterNode = (value: string, data: Tree) => {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
};

const data: Tree[] = [
    {
        id: 1,
        label: 'Level one 1',
        children: [
            {
                id: 4,
                label: 'Level two 1-1',
                children: [
                    {
                        id: 9,
                        label: 'Level three 1-1-1',
                    },
                    {
                        id: 10,
                        label: 'Level three 1-1-2',
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: 'Level one 2',
        children: [
            {
                id: 5,
                label: 'Level two 2-1',
            },
            {
                id: 6,
                label: 'Level two 2-2',
            },
        ],
    },
    {
        id: 3,
        label: 'Level one 3',
        children: [
            {
                id: 7,
                label: 'Level two 3-1',
            },
            {
                id: 8,
                label: 'Level two 3-2',
            },
        ],
    },
];
</script>
<template>
    <div>
        <el-input v-model="filterText" placeholder="Filter keyword" />

        <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
        />
    </div>
</template>
